<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex align-stretch benben-position-layout flex editAddress_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex align-center justify-between flex-sub editAddress_fd0_0'>
          <view class='flex align-center editAddress_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back" data-url="1">
            <text class='fu-iconfont2  editAddress_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex align-center'>
            <text class='editAddress_fd0_0_c1_c0' v-if="id==''">我的地址</text><text class='editAddress_fd0_0_c1_c0'
              v-if="id!=''">编辑我的地址</text>
          </view>
          <view class='flex align-center justify-end editAddress_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---添加地址flex布局开始-->
      <view class="flex flex-direction align-stretch benben-flex-layout">
        <view class='flex flex-direction align-stretch editAddress_fd1_0'>
          <view class='flex flex-wrap align-center editAddress_fd1_0_c0'>
            <text class='editAddress_fd1_0_c0_c0'>联系人</text>
            <input class='editAddress_fd1_0_c0_c1' type="text" :placeholder="`请输入`" confirm-type="done" :maxlength="-1"
              placeholder-style="color:#999;font-size:32rpx" v-model="dataMessage.name" />
          </view>
          <view class='flex flex-wrap align-center editAddress_fd1_0_c0'>
            <text class='editAddress_fd1_0_c0_c0'>手机号</text>
            <input class='editAddress_fd1_0_c0_c1' type="number" :placeholder="`请输入`" confirm-type="done"
              :maxlength="11" placeholder-style="color:#999;font-size:32rpx" v-model="dataMessage.mobile" />
          </view>
          <view class='flex flex-direction flex-wrap align-stretch'>
            <view class='flex flex-wrap align-center editAddress_fd1_0_c0' @tap.stop="pickerDiy1697533676017=true">
              <text class='editAddress_fd1_0_c2_c0_c0'>{{$t('所在地区')}}</text>
              <input class='editAddress_fd1_0_c0_c1' type="text" :placeholder="`请选择省市区县`" confirm-type="done"
                :maxlength="-1" :disabled='true' placeholder-style="color:#999;font-size:32rpx"
                v-model="address_name" />
              <image class='editAddress_fd1_0_c2_c0_c2' mode="aspectFit" :src='STATIC_URL+"47.png"'></image>
            </view>
          </view>
          <view class='flex flex-wrap align-center editAddress_fd1_0_c0'>
            <text class='editAddress_fd1_0_c0_c0'>所在乡镇</text>
            <input class='editAddress_fd1_0_c0_c1' type="text" :placeholder="`请输入所在乡镇`" v-model="dataMessage.towns" confirm-type="done"
              :maxlength="-1" placeholder-style="color:#999;font-size:32rpx" />
          </view>
          <view class='flex flex-wrap align-center editAddress_fd1_0_c4'>
            <text class='editAddress_fd1_0_c0_c0'>所在村</text>
            <input class='editAddress_fd1_0_c0_c1' type="text" :placeholder="`请输入所在村`" confirm-type="done"
              :maxlength="-1" placeholder-style="color:#999;font-size:32rpx" v-model="dataMessage.village" />
          </view>
          <view class='flex flex-wrap editAddress_fd1_0_c5'>
            <textarea class='flex editAddress_input_fd1_0_c5' confirm-type="done" :placeholder="'请填写详细地址：如门牌号、楼栋号等'"
              :maxlength="240" placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx"
              v-model="dataMessage.address" />

          </view>
        </view>
        <view class='flex flex-wrap align-center justify-center editAddress_fd1_1'>
          <button class='editAddress_fd1_1_c0' @tap.stop="addAddressFunc()" v-if=" id==''">保存</button><button
            class='editAddress_fd1_1_c0_1' @tap.stop="addAddressFunc()" v-if=" id!=''">保存</button>
        </view>
      </view>

      <!---添加地址flex布局结束-->
      <!--选择器-地区选择开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1697533676017"
        :label.sync='address_name' :province.sync='dataMessage.province' :city.sync='dataMessage.city'
        :area.sync='dataMessage.district' mode='region' :mask-show='true' :picker-height='88' :hide-area='false'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between editAddress_picker2_0'>
            <text class='editAddress_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text class='editAddress_picker2_0_c1'>选择所在地区</text>
            <text class='editAddress_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确定</text>
          </view>
        </template>
      </benben-picker>
      <!--选择器-地区选择结束 -->


    </view>
  </view>
</template>
<script>
  import {
    validate
  } from '@/common/utils/validate.js'
  export default {
    components: {},


    data() {
      return {
        "pickerDiy1697533676017": false,
        "is_default": false,
        "address": "",
        "sex_type": [{
          "name": "先生",
          "value": "1",
          "image": ""
        }, {
          "name": "女士",
          "value": "2",
          "image": ""
        }],
        "sex_id": "1",
        "address_type": [{
          "name": "公司",
          "value": "1",
          "image": ""
        }, {
          "name": "家",
          "value": "2",
          "image": ""
        }],
        address_name:'',
        "address_id": "1",
        "dataMessage": {
          towns:'',
          village:'',
          "name": "",
          "mobile": "",
          "address": "",
          "is_default": "",
          "postal_code": "",
          "province": "",
          "city": "",
          "district": "",
          "sex": "",
          "label_name": "",
          "address_detail": "",
          "province_code": "",
          "city_code": "",
          "district_code": ""
        },
        "add": {
          towns:'',
          village:'',
          "name": "",
          "mobile": "",
          "is_default": "",
          "province_code": "",
          "city_code": "",
          "district_code": "",
          "address": "",
          "sex": "",
          "label_name": "",
          "address_id": "",
          "user_id": "",
          "status": "",
          "province_id": "",
          "province": "",
          "city_id": "",
          "city": "",
          "district_id": "",
          "district": "",
          "update_time": ""
        },
        "id": ""
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      let {
        id
      } = options
      if (id !== undefined) this.id = id
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      this.getaddressMessageFunc()
    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //添加地址
      async addAddressFunc() {
        if (!validate(this.dataMessage.name, 'require')) {
          this.$message.info('请输入收货人名称');
          return false;
        }
        if (!validate(this.dataMessage.mobile, 'require')) {
          this.$message.info('请输入联系电话');
          return false;
        }
        if (!validate(this.dataMessage.mobile, 'phone')) {
          this.$message.info('请输入正确的手机号');
          return false;
        }
        if (!validate(this.dataMessage.address, 'require')) {
          this.$message.info('所在地区不能为空');
          return false;
        }
        //请求方法
        //数据验证

        let dataadd = await this.$api.dbPost(global.apiUrls.post62d51684b3a65, {
          name: this.dataMessage.name,
          mobile: this.dataMessage.mobile,
          is_default: '1',
          province_code: this.dataMessage.province,
          city_code: this.dataMessage.city,
          district_code: this.dataMessage.district,
          address: this.dataMessage.address,
          address_id: this.id,
          village:this.dataMessage.village,
          towns:this.dataMessage.towns,
        });
        if (!dataadd) return
        if (dataadd.data.code != 1) {
          this.$message.info(dataadd.data.msg);
          return
        }
        let infoadd = dataadd.data;
        this.add = infoadd.data
        if (this.id == '') {
          this.$message.info('添加成功');
        } else if (this.id != '') {
          this.$message.info('修改成功');
        }
        setTimeout(() => {
          this.$urouter.navigateBack(1);
        }, 500)
      },
      //获取单个地址
      async getaddressMessageFunc() {
        this.dataMessage.sex = '1';
        if (this.id != '') {
          //请求方法
          //数据验证

          let datadataMessage = await this.$api.post(global.apiUrls.post5cadc769e4f16, {
            address_id: this.id
          });

          if (datadataMessage.data.code != 1) {
            this.$message.info(datadataMessage.data.msg);
            return
          }
          let infodataMessage = datadataMessage.data;
          this.dataMessage = infodataMessage.data
          this.address_name =  this.dataMessage.address_detail
        }
        if (this.dataMessage.is_default == '1') {
          this.is_default = true;
        } else {
          this.is_default = false;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: var(--benbenbgColor1);
    background-size: 100% auto;
  }

  .editAddress_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .editAddress_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 500;
    color: #333;
  }

  .editAddress_fd0_0_c0_c0 {
    font-size: 32rpx;
    font-weight: 500;
    color: #333;
  }

  .editAddress_fd0_0_c0 {
    width: 180rpx;
  }

  .editAddress_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
  }

  .editAddress_fd1_1_c0_1 {
    background: var(--benbenbgColor7);
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 686rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: 500;
  }

  .editAddress_fd1_1_c0 {
    background: #E63838;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-size: 32rpx;
    color: var(--benbenFontColor3);
    width: 702rpx;
    height: 88rpx;
    line-height: 88rpx;
    font-weight: 500;
  }

  .editAddress_fd1_1 {
    width: 750rpx;
    position: fixed;
    left: 0rpx;
    bottom: calc(40rpx + var(--window-bottom));
  }

  .editAddress_input_fd1_0_c5 {
    width: 100%;
    height: 88rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #333;
  }

  .editAddress_fd1_0_c5 {
    background: rgba(246, 246, 246, 1);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    padding: 24rpx 24rpx 0rpx 24rpx;
    height: 250rpx;
    color: #333;
    font-size: 28rpx;
    font-weight: 400;
  }

  .editAddress_fd1_0_c4 {
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .editAddress_fd1_0_c2_c0_c2 {
    width: 40rpx;
    height: 40rpx;
  }

  .editAddress_fd1_0_c2_c0_c0 {
    line-height: 45rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333333;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .editAddress_fd1_0_c0_c1 {
    text-align: right;
    margin: 0rpx 0rpx 0rpx auto;
    color: var(--benbenFontColor0);
    font-size: 32rpx;
    font-weight: 400;
  }

  .editAddress_fd1_0_c0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
  }

  .editAddress_fd1_0_c0 {
    border-bottom: 1px solid #eee;
    padding: 32rpx 0rpx 32rpx 0rpx;
  }

  .editAddress_fd1_0 {
    background: var(--benbenbgColor1);
    padding: 0rpx 32rpx 0rpx 32rpx;
    background-size: 100% auto !important;
    margin: 0rpx 0rpx 120rpx 0rpx;
  }

  .editAddress_picker2_0_c2 {
    color: #E63838;
    font-size: 32rpx;
    font-weight: 500;
  }

  .editAddress_picker2_0_c1 {
    color: #333333;
    font-size: 36rpx;
    font-weight: 500;
  }

  .editAddress_picker2_0_c0 {
    color: #BFBFBF;
    font-size: 32rpx;
    font-weight: 400;
  }

  .editAddress_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }
</style>
